<script setup>
import {computed, ref} from 'vue';
import {useRoute} from "vue-router";



const route = useRoute()
const current = computed(() => route.path)





const menuData = ref([
  {
    id: 1,
    title: '首页',
    path: '/',
  },
  {
    id: 2,
    title: '页面',
    path: '/page',
    icon: 'Setting',
    children: [
      { id: 21, title: '用户管理', path: '/page/page1' },
      { id: 22, title: '权限配置', path: '/page/page2' }
    ]
  }
]);
</script>

<template>
  <div>
    <div style="position: fixed; top:0px ;left:0px;  width: 100vw ; height: 50px;">
      <el-menu mode="horizontal" :default-active="current" router>
        <template v-for="item in menuData" :key="item.id">
          <!-- 无子菜单 -->
          <el-menu-item
              v-if="!item.children"
              :index="item.path"
          >
            <span>{{ item.title }}</span>
          </el-menu-item>

          <!-- 有子菜单 -->
          <el-sub-menu v-else :index="item.path">
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
                v-for="child in item.children"
                :key="child.id"
                :index="child.path"
            >
              {{ child.title }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
    <router-view>
    </router-view>

  </div>
</template>

<style scoped>

</style>